<#assign path = request.getContextPath() />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增规则</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="${path}/static/css/font.css">
		<link rel="stylesheet" href="${path}/static/css/css.css">
		<link rel="stylesheet" type="text/css" href="${path}/static/css/xadmin.css" />
		<script src="${path}/static/lib/layui/layui.js"></script>
		<script type="text/javascript" src="${path}/static/js/jquery.min.js"></script>
		<script src="${path}/static/lib/layui/lay/modules/table.js"></script>
		<script src="${path}/static/js/xadmin.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div id="btns" class="btns">
						<button type="button" class="layui-btn btn">返回</button>
					</div>
					<div class="rule-div m20">
						<div class="">
							<label for="username" class="lable">规则名称:</label>
							<input type="text" placeholder="规则名称" class="ruleint"/>
						</div>
						
						<p class="mt20">
							<label for="username" class="lable">考勤规则类型:</label>
							<input type="radio" name="" id="" value="" class="option"/>
							<span class="pr20">固定班制</span>
							<input type="radio" name="" id="" value="" class="option"/>
							<span>弹性工作制</span>
						</p>
						<div class="ml100">
							<p class="mt20">
								<label for="username" class="lable">工作时段:</label>
								<input class="ruleint" placeholder="选择" name="start" id="start">
								<span>-</span>
								<input class="ruleint" placeholder="选择" name="end" id="end">
							</p>
							<p class="mt20 rule-list">
								<label for="username" class="lable">工作日:</label>
								<span><b>周一</b><b>周二</b><b>周三</b><b>周四</b><b>周五</b></span>
								<button type="button" class="ruleBtn" id="ruleBtn">修改</button>
								<br />
								<input type="checkbox" name="" id="" value=""  class="option"/>遵循
								<button type="button" class="ruleBtn">法定节假日</button>
							</p>
							<p class="mt20">
								<input type="checkbox" name="" id="" value=""  class="option"/>统计加班时间
								<p>超出要求时长
								<select name="">
									<option value="">30分钟</option>
									<option value="">60分钟</option>
								</select>
								外的工作工作算作加班</p>
							</p>
						</div>
					</div>
					
					<div class="rule-div rule-list m20">
						<div class="">
							<label for="username" class="lable">参与考勤员工:</label>
							<button type="button" class="ruleBtn">选择考勤员工范围</button>
							<ul class="rule-ul">
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="li-bor">市场营销部 <button type="button" class="closex">x</button></li>
								<li class="">
									<div class="buttons">
										<button type="button" class="btn">确定</button>
										<button type="button" class="btn-nobg">取消</button>
									</div>
								</li>
							</ul>
							
						</div>
						
						
					</div>
				</div>
			</div>
		</div>
		
		<div id="mask" class="mask" style="display: none;"></div>
		<div class="tanchuang" style="display: none;">
			<p class="title">设置工作日<button class="close" type="button" id="close">x</button></p>
			<ul>
				<li class="tClist">
					<input type="checkbox" name="" id="" value="" class="check"/>
					<span>周一</span>
				</li>
				<li class="tClist">
					<input type="checkbox" name="" id="" value="" class="check"/>
					<span>周二</span>
				</li>
				<li class="tClist">
					<input type="checkbox" name="" id="" value="" class="check"/>
					<span>周三</span>
				</li>
				<li class="tClist">
					<input type="checkbox" name="" id="" value="" class="check"/>
					<span>周四</span>
				</li>
				<li class="tClist">
					<input type="checkbox" name="" id="" value="" class="check"/>
					<span>周五</span>
				</li>
				<li class="tClist">
					<input type="checkbox" name="" id="" value="" class="check"/>
					<span>周六</span>
				</li>
				<li class="tClist">
					<input type="checkbox" name="" id="" value="" class="check"/>
					<span>周日</span>
				</li>
				<li class="tClist">
					<div class="buttons">
						<button type="button" class="btn">确定</button>
						<button type="button" class="btn-nobg">取消</button>
					</div>
				</li>
			</ul>
			
		</div>
	</body>
	<script>
		layui.use(['laydate', 'form'],
		function() {
			var laydate = layui.laydate;
			//执行一个laydate实例
			laydate.render({
				elem: '#start' //指定元素
			});
	
			//执行一个laydate实例
			laydate.render({
				elem: '#end' //指定元素
			});
		});
	</script>
	<script type="text/javascript">
		$("#ruleBtn").click(function(){
			$("#mask").show();
			$(".tanchuang").show();
			$(".layui-fluid").hide();
		});
		$("#close").click(function(){
			$("#mask").hide();
			$(".tanchuang").hide();
			$(".layui-fluid").show();
		})
	</script>
</html>
